<template>
	<view>
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms :rules="rules" ref="adviceForm" :modelValue="adviceFormData">
				<uni-forms-item label="标题" required name="adviceTitle" labelWidth="90px">
					<uni-easyinput v-model="adviceFormData.adviceTitle" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="问题描述" name="adviceContent" labelWidth="90px">
					<uni-easyinput type="textarea" v-model="adviceFormData.adviceContent" placeholder="请输入问题内容" />
				</uni-forms-item>
				</uni-forms-item>
				<uni-forms-item label="图片上传" labelWidth="90px">
					<view class="img-box flex flex-wrap">
						<view class="img" v-for="(item, index) in adviceFormData.imgList">
							<image class="pic" :src="item" mode="aspectFill" @click="lookImg(index)"></image>
							<image @click="delImg(index)" class="close" src="/static/images/close.png"
								mode="aspectFill"></image>
						</view>
						<!-- 上传按钮 -->
						<view class="img upload flex-center" @click="uploadImg">
							<image class="add-pic" src="/static/images/upload.png" mode="aspectFill"></image>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="acceptPartyId">
					<view @click="getAdvice()"
						style="display: flex; flex-direction: column; justify-content: space-between">
						<text style="margin-bottom: 15rpx;">谏言对象</text>
						<uni-data-select v-model="adviceFormData.acceptPartyId" :localdata="range"></uni-data-select>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button type="warn" size="mini" @click="reset">重置</button>
				<button type="primary" size="mini" @click="onSubmit()">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deleteImage,
		getUser,
		getMyAdvice,
		showAdviceHierarchy,
		SubmitAdvice,
		UpdatemyAdvice
	} from '@/api/home/home.js'
	export default {
		name: "submit-advice",
		data() {
			return {
				adviceFormData: {
					launchPartyId: '',
					adviceTitle: '',
					adviceContent: '',
					imgList: [], //图片
					acceptPartyId: '',
					advicePhoto: '',
				},
				range: [],
				index: [0, 0],
				imgMaxNum: 9,
				rules: {
					adviceTitle: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
					adviceContent: {
						rules: [{
							required: true,
							errorMessage: '问题描述不能为空'
						}]
					},
					acceptPartyId: {
						rules: [{
							required: true,
							errorMessage: '请选择谏言对象'
						}]
					},
				}
			};
		},
		methods: {
			onSubmit() {
				uni.showModal({
					title: '提交',
					content: '是否确定修改信息',
					success: (res) => {
						console.log(this.adviceFormData + '（（（');
						if (res.confirm) {
							this.$refs.adviceForm.validate(['adviceTitle'], (err, formData) => {
								if (!err) {
									this.adviceFormData.advicePhoto = this.adviceFormData.imgList
										.toString()
										console.log(this.adviceFormData.imgList .toString()+"sasa");
									UpdatemyAdvice(this.adviceFormData).then(res => {
										this.$showTip(res.msg, 'success')
									})
									uni.navigateBack({
										delta: 1
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});



			},
			// 重置表单
			reset() {
				this.adviceFormData = {}
			},
			//上传图片
			uploadImg: function() {
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						var tempFilePaths = res.tempFilePaths;
						if (that.adviceFormData.imgList.length + tempFilePaths.length > that.imgMaxNum) {
							uni.showToast({
								title: '超过上传图片的最大数量',
								icon: 'none'
							});
						} else {
							if (that.adviceFormData.imgList.length != 0) {
								that.adviceFormData.imgList = that.adviceFormData.imgList.concat(res
									.tempFilePaths);
							} else {
								//多图上传
								for (var i = 0; i < res.tempFilePaths.length; i++) {
									//显示消息提示框
									//上传逻辑
									uni.uploadFile({
										url: 'http://localhost:8080/api/oss/file/upload', //仅为示例，非真实的接口地址
										filePath: tempFilePaths[i],
										name: 'file',
										formData: {
											'user': 'test'
										},
										success: (res) => {
											that.adviceFormData.imgList.push(res.data)
										}
									});
								}
							}

						}
					}
				});
			},
			// 查看图片
			lookImg: function(val) {
				const urls = this.adviceFormData.imgList;
				const current = val;
				uni.previewImage({
					urls,
					current
				});
			},
			// 删除图片
			delImg: function(index) {
				let that = this;
				console.log(index);
				console.log(that.adviceFormData.imgList + '值');
				deleteImage(that.adviceFormData.imgList[index]).then(res => {
					this.$showTip('删除成功', 'success')
					this.adviceFormData.imgList.splice(index, 1);
				})
			},
			getAdvice() {
				var cardNumArr = [];
				var rangeObj = {};
				console.log(cardNumArr);
				showAdviceHierarchy(1).then(res => {
					for (var key in res.data) {
						rangeObj = {
							text: res.data[key],
							value: key
						}
						cardNumArr.push(rangeObj)
					}
					this.range = cardNumArr;
				})
			}
		},
		onLoad(options) {
			this.adviceFormData.adviceId = options.adviceId
			this.adviceFormData.adviceTitle = options.adviceTitle
			this.adviceFormData.adviceContent = options.adviceContent
			this.adviceFormData.imgList = options.advicePhoto.split(",")
			this.adviceFormData.acceptPartyId = options.acceptPartyId
		},
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.cascade {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
		border: 2px solid #efefef;
		border-radius: 10px;
	}

	.other {

		width: 18px;
		height: 18px;
		border-radius: 18px;
		background-color: #b6b6b6;
		color: #ffffff;
		font-size: 12px;
		line-height: 18px;
		text-align: center;
	}

	.img-box {
		.img {
			width: 200rpx;
			height: 200rpx;
			position: relative;
			margin-left: 20rpx;
			margin-top: 20rpx;

			&:nth-child(3n + 1) {
				margin-left: 0;
			}

			.pic {
				width: 100%;
				height: 100%;
			}

			.close {
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}

		.upload {
			background-color: #f6f6f6;

			.add-pic {
				// width: 100rpx;
				// height: 100rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
